<template>
  <div>
    <!-- 指标基本信息label 开始  -->
    <div>
      <div class="header">
        <span class="headerIcon">|</span>
        <span class="headerText">{{pageName}}</span>
<!--        <span class="headerDiscript">分数=部门年度考核得分×40%+主管院级领导评分×20%+其他院级领导评分×15%+网上测评得分×15%+十三个教学部门党政负责人评分×10%</span>-->
        <span class="headerDiscript">分数=部门年度考核得分×{{para.canshu1}}%+主管院级领导评分×{{para.canshu2}}%
          +其他院级领导评分×{{para.canshu3}}%+网上测评得分×{{para.canshu4}}%+十三个教学部门党政负责人评分×{{para.canshu5}}%</span>
        <el-link type="primary" @click="toModifyGongshi" style="margin-left: 30px;">修改</el-link>
      </div>
    </div>
    <!-- 指标基本信息label 结束  -->
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="lineIndex"
        label="序号"
        width="80">
      </el-table-column>
      <el-table-column
        prop="dept"
        label="部门"
        width="180">
      </el-table-column>
      <el-table-column
        prop="nickName"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="userName"
        label="员工编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="scoreA"
        label="部门年度考核得分"
        width="140">
      </el-table-column>
      <el-table-column
        prop="scoreB"
        label="主管院级领导评分"
        width="140"
        >
      </el-table-column>
      <el-table-column
        prop="scoreC"
        label="其他院级领导评分"
        width="140">
      </el-table-column>
      <el-table-column
        prop="scoreD"
        label="网上测评得分"
        width="140">
      </el-table-column>
      <el-table-column
        prop="scoreE"
        label="十三个教学部门党政负责人评分"
        width="140">
      </el-table-column>
      <el-table-column
        prop="score"
        label="民主测评得分"
        width="140">
      </el-table-column>
    </el-table>

    <el-dialog title="参数设置" :visible.sync="dialogTableVisible" width="500px">
      <el-form>
      <el-form-item label="第一个参数">
        <el-input v-model="para.canshu1" placeholder="请填写第一个参数" style="width: 350px"></el-input>
      </el-form-item>
      <el-form-item label="第二个参数">
        <el-input v-model="para.canshu2" placeholder="请填写第二个参数" style="width: 350px"></el-input>
      </el-form-item>
      <el-form-item label="第三个参数">
        <el-input v-model="para.canshu3" placeholder="请填写第三个参数" style="width: 350px"></el-input>
      </el-form-item>
      <el-form-item label="第四个参数">
        <el-input v-model="para.canshu4" placeholder="请填写第四个参数" style="width: 350px"></el-input>
      </el-form-item>
      <el-form-item label="第五个参数">
        <el-input v-model="para.canshu5" placeholder="请填写第五个参数" style="width: 350px"></el-input>
      </el-form-item>
      <el-row>
        <el-col style="text-align: right">
          <el-button type="primary" @click="saveParas">保存</el-button>
        </el-col>
      </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>

  import * as kaopingService from '@/api/dangjian/kaopingService';
  import $ from "jquery"
  export default {
    name: 'panel6',
    data() {
      return {
        pageName: '综合部门处级干部',
        tableData: [{
          lineIndex: '1',
          dept: '上海市普陀区金沙江路',
          nickName: '上海市普',
          userName: '上海市普',
          scoreA: 20,
          scoreB: 20,
          scoreC: 20,
          scoreD: 20,
          scoreE: 20,
          score:100,
        }, {
          lineIndex: '1',
          dept: '上海市普陀区金沙江路',
          nickName: '上海市普',
          userName: '上海市普',
          scoreA: 20,
          scoreB: 20,
          scoreC: 20,
          scoreD: 20,
          scoreE: 20,
          score:100,
        }, {
          lineIndex: '1',
          dept: '上海市普陀区金沙江路',
          nickName: '上海市普',
          userName: '上海市普',
          scoreA: 20,
          scoreB: 20,
          scoreC: 20,
          scoreD: 20,
          scoreE: 20,
          score:100,
        }, {
          lineIndex: '1',
          dept: '上海市普陀区金沙江路',
          nickName: '上海市普',
          userName: '上海市普',
          scoreA: 20,
          scoreB: 20,
          scoreC: 20,
          scoreD: 20,
          scoreE: 20,
          score:100,
        }],
        para:{
          canshu1:40,
          canshu2:20,
          canshu3:15,
          canshu4:15,
          canshu5:10,
        },
        dialogTableVisible:false,
      }
    },
    mounted() {
      this.loadData();
      this.loadKpiParas();
    },
    methods:{
      loadData(){
        var that=this;
        var para={
          type:"综合部门处级干部"
        }
        kaopingService.getKpiScore(para).then(response=>{
          that.tableData=response.data;
        });
      },
      toModifyGongshi() {
        this.dialogTableVisible=true;
      },
      saveParas(){
        var that=this;
        that.para.pageName=that.pageName
        kaopingService.saveKpiParas(that.para).then(response=>{
          this.dialogTableVisible=false;
          that.loadKpiParas();
        })
      },
      loadKpiParas(){
        var that=this;
        kaopingService.getKpiParas({
          pageName:that.pageName
        }).then(response=>{
          that.para=JSON.parse(response.data[0].para);
        })
      }
    }
  }
</script>

<style scoped>
  .header {
    /*border-bottom: 2px solid lightgrey;*/
    padding: 10px 10px 10px 0px;
  }

  .headerIcon {
    color: #00afff;
    font-weight: 900;
    font-size: 22px;
  }

  .headerText {
    font-weight: 600;
    font-size: 16px;
    padding-left: 10px;
  }

  .headerDiscript{
    font-weight:normal;
    font-size: 14px;
    padding-left: 10px;
    margin-left: 100px;
  }
</style>
